<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { onReady } from "@dcloudio/uni-app";
import loading from "@/components/loading/loading.vue";
import { useMyToastStore } from "@/store/myToast";

const myToast = useMyToastStore();
const instance = getCurrentInstance();
const util = instance?.proxy?.$util;
const request = instance?.proxy?.$request;

let showPage = ref(false);
//登录相关
let account = ref("");
let password = ref("");
let viewPassword = ref(true);
let isLogin = ref(false);

let isRemember = ref(false);
isRemember.value = uni.getStorageSync("isRemember") || false;
let userInfo = uni.getStorageSync("userInfo") || "";
if (isRemember.value && userInfo) {
  account.value = userInfo.account;
  password.value = userInfo.password;
}

// 登录
const handleLoginClick = async () => {
  if (account.value && password.value) {
    isLogin.value = true;
    try {
      // 获取登录信息
      const loginData = await util.getPublicKey(password.value);
      console.log(loginData);
      // 登录
      const res = await request.post("login", {
        password: loginData.encrypt,
        account: account.value,
        csrftoken: loginData.csrftoken,
        cookie: loginData.cookie,
      });
      console.log(res);
      // 判断是否成功
      if (res.data) {
        uni.setStorageSync("userInfo", {
          cookie: res.data,
          account: account.value,
          password: password.value,
        });
        uni.setStorageSync(
          "newLoginDate",
          uni.$u.timeFormat(Number(new Date()), "yyyy/mm/dd")
        );
        uni.setStorageSync("loginExpired", true);
        uni.$emit("updateLoginInfo");
        uni.navigateBack().then(() => {
          myToast.params = {
            type: "success",
            message: "登录成功",
          };
        });
      } else {
        myToast.params = {
          type: "error",
          message: "登录失败，请检查账号密码",
        };
        isLogin.value = false;
      }
    } catch (error) {
      myToast.params = {
        type: "error",
        message: "登录出现问题，请稍后重试",
      };
      isLogin.value = false;
    }
  } else {
    myToast.params = {
      type: "warning",
      message: "先将登录信息填写完整！",
    };
  }
};
// 加载
onReady(() => {
  setTimeout(() => {
    showPage.value = true;
  }, 500);
});

//记住账号密码
let checkboxValue = reactive([]);
const checkboxChange = (e) => {
  if (e.length > 0) {
    uni.setStorageSync("isRemember", true);
  } else {
    uni.setStorageSync("isRemember", false);
  }
};
</script>

<template>
  <view class="user-login">
    <myToast></myToast>
    <loading v-if="!showPage"></loading>
    <u-navbar autoBack placeholder bgColor="#00000000" leftIconSize="38">
      <template #center>
        <text class="text-16 text-bold-700">登录</text>
      </template>
    </u-navbar>
    <view class="header-image">
      <image src="@/static/login/bg-login1.png" mode="widthFix" />
    </view>
    <view class="login-input-box">
      <view class="login-title flex align-center justify-between">
        <view class="title-text">Login</view>
      </view>
      <view class="input-item flex align-center">
        <image
          class="item-icon mr-xxs"
          src="@/static/login/ic-user.png"
          mode="widthFix"
        />
        <u-input
          placeholder="学号"
          fontSize="16px"
          border="bottom"
          placeholderStyle="color: #969EAC"
          type="number"
          v-model="account"
        >
        </u-input>
      </view>
      <view class="input-item flex align-center">
        <image
          class="item-icon mr-xxs"
          src="@/static/login/ic-lock.png"
          mode="widthFix"
        />
        <u-input
          placeholder="密码"
          fontSize="16px"
          border="bottom"
          placeholderStyle="color: #969EAC"
          :password="viewPassword"
          v-model="password"
        >
          <template #suffix>
            <view
              class="input-icon-box flex align-center justify-end"
              @click="viewPassword = !viewPassword"
            >
              <image
                class="input-icon"
                src="@/static/login/ic-eye.png"
                mode="widthFix"
                v-if="viewPassword"
              />
              <image
                class="input-icon"
                src="@/static/login/ic-eye-close.png"
                mode="widthFix"
                v-else
              />
            </view>
          </template>
        </u-input>
      </view>
      <view class="input-item">
        <u-checkbox-group
          v-model="checkboxValue"
          placement="column"
          @change="checkboxChange"
          size="32"
        >
          <u-checkbox
            label="保存登录信息"
            name="保存登录信息"
            labelColor="#969EAC"
            labelSize="28"
            iconSize="24"
            activeColor="#109363"
            :checked="isRemember"
          >
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>
    <view class="login-button-box">
      <u-button
        color="#109363"
        text="确认登录"
        throttleTime="1200"
        :disabled="isLogin"
        :loading="isLogin"
        @click="handleLoginClick"
      ></u-button>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background: linear-gradient(#f1fffa, #f2f5f6, #fff, #fff);
}
.user-login {
  image {
    height: auto;
  }
  .header-image {
    padding: 0 24rpx;
  }
  .login-input-box {
    padding: 0 64rpx;
    .login-title {
      .title-text {
        padding-bottom: 24rpx;
        font-size: 58rpx;
        font-weight: 700;
        color: #333;
      }
    }
    .input-item {
      margin-top: 44rpx;
      .item-icon {
        width: 48rpx;
      }
      u-input {
        width: 100%;
      }
      .input-icon-box {
        width: 44px;
        .input-icon {
          width: 44rpx;
        }
      }
    }
  }
  .login-button-box {
    background-color: #fff;
    padding: 66rpx 48rpx;
    u-button {
      :deep(button) {
        border-radius: 12px;
        height: 88rpx !important;
      }
    }
    :deep(.u-button) {
      border-radius: 12px;
      height: 88rpx !important;
    }
    :deep(.u-button__text) {
      font-size: 16px !important;
      font-weight: 700;
    }
  }
}
</style>
